/*
 * @Author: xiaosihan 
 * @Date: 2023-08-16 01:17:45 
 * @Last Modified by: xiehangyunn
 * @Last Modified time: 2025-04-17 19:14:18
 */


import { ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons";
import { Button, Dropdown, Popconfirm, Slider, Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import copySVG from "./copy.svg?raw";
import delSVG from "./del.svg?raw";
import layeroutSVG from "./layerout.svg?raw";
import lockSVG from "./lock.svg?raw";
import styles from "./toolMenu.module.less";
import unlockSVG from "./unlock.svg?raw";

interface Iprops {
}

// 菜单工具条
export default function ToolMenu() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [visible, setVisible] = useState(false);
    const [hoverBtn, setHoverBtn] = useState<"" | "up" | "down">("");
    const [maxLayerout, setMaxLayerput] = useState(0);
    const [currentLayerout, setCurrentLayerout] = useState(0);
    const [lock, setLock] = useState(false);
    const [showCopyTo, setShowCopyTo] = useState(false);

    const [componentList, setComponentList] = useState<Array<{ key: string, name: string }>>([]);

    const [activeComponent, setActiveComponent] = useState(designTemplateEditorStore.activeComponent);

    useEffect(() => autorun(() => {
        setActiveComponent(designTemplateEditorStore.activeComponent);
    }), []);

    useEffect(() => autorun(() => {
        setLock(designTemplateEditorStore.lock);
    }), []);

    useEffect(() => autorun(() => {
        const { activeObjectId } = designTemplateEditorStore;
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject) {
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    // 更新层级
    const updataLayerout = () => {
        const objects = designTemplateEditor.fabricCanvas.getObjects();
        setMaxLayerput(objects.length - 1);

        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObject) {
            const layerout = objects.indexOf(activeObject);
            setCurrentLayerout(layerout);
        }
    }

    //上移一层
    const upMovellayerout = () => {
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObject) {
            setCurrentLayerout(currentLayerout + 1);
            activeObject.moveTo(Math.min(maxLayerout, currentLayerout + 1));
        }
    }

    //下移一层
    const downMovellayerout = () => {
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObject) {
            setCurrentLayerout(currentLayerout - 1);
            activeObject.moveTo(Math.max(0, currentLayerout - 1));
        }
    }

    return (
        <div className={clsx(styles.toolMenu, visible && styles.visible)} >
            {/* 放大 */}
            <Tooltip
                title="放大(alt+=)"
                placement="bottom"
                mouseLeaveDelay={0}
                mouseEnterDelay={0.5}
            >
                <span
                    className={styles.btn}
                    onClick={() => {
                        designTemplateEditor.amplify();
                    }}
                >
                    <ZoomInOutlined />
                </span>
            </Tooltip>
            {/* 缩小 */}
            <Tooltip
                title="缩小(alt+-)"
                placement="bottom"
                mouseLeaveDelay={0}
                mouseEnterDelay={0.5}
            >
                <span
                    className={styles.btn}
                    onClick={() => {
                        designTemplateEditor.reduce();
                    }}
                >
                    <ZoomOutOutlined />
                </span>
            </Tooltip>

            {/* 调整层级 */}
            <Tooltip
                title="图层"
                placement="bottom"
                mouseLeaveDelay={0}
                mouseEnterDelay={0.5}
            >
                <Dropdown
                    trigger={["click"]}
                    placement="top"
                    destroyPopupOnHide={true}
                    onOpenChange={open => {
                        if (open) {
                            updataLayerout();
                        }
                    }}
                    dropdownRender={menus => {
                        return (
                            <div className={styles.move_layerout} >
                                <span className={styles.layerout_sort} >图层顺序</span>
                                <Button
                                    block
                                    disabled={maxLayerout === currentLayerout}
                                    type={hoverBtn === "up" ? "primary" : undefined}
                                    onMouseEnter={() => setHoverBtn("up")}
                                    onMouseLeave={() => setHoverBtn("")}
                                    onClick={() => upMovellayerout()}
                                >上移</Button>
                                <Slider
                                    vertical
                                    min={0}
                                    max={maxLayerout}
                                    step={1}
                                    value={currentLayerout}
                                    onChange={layerout => {
                                        setCurrentLayerout(layerout);
                                        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
                                        if (activeObject) {
                                            activeObject.moveTo(layerout);
                                        }
                                    }}
                                    style={{ height: 150, margin: "10px auto" }}
                                />
                                <Button
                                    block
                                    disabled={0 === currentLayerout}
                                    type={hoverBtn === "down" ? "primary" : undefined}
                                    onMouseEnter={() => setHoverBtn("down")}
                                    onMouseLeave={() => setHoverBtn("")}
                                    onClick={() => downMovellayerout()}
                                >下移</Button>
                            </div>
                        )
                    }}
                >
                    <span
                        className={styles.btn}
                        dangerouslySetInnerHTML={{ __html: layeroutSVG }}
                    >
                    </span>
                </Dropdown>

            </Tooltip>

            {/* 复制 */}
            <Tooltip
                title="复制(ctrl+D)"
                placement="bottom"
                mouseLeaveDelay={0}
                mouseEnterDelay={0.5}
            >
                <span
                    className={styles.btn}
                    dangerouslySetInnerHTML={{ __html: copySVG }}
                    onClick={() => {
                        designTemplateEditor.copy();
                    }}
                >
                </span>
            </Tooltip>

            {/* 锁 */}
            <Tooltip
                title="锁"
                placement="bottom"
                mouseLeaveDelay={0}
                mouseEnterDelay={0.5}
            >
                <span
                    className={clsx(styles.btn, lock && styles.red)}
                    dangerouslySetInnerHTML={{ __html: lock ? lockSVG : unlockSVG }}
                    onClick={() => {
                        designTemplateEditor.setLockState(!lock);
                        setLock(!lock);
                    }}
                >
                </span>
            </Tooltip>

            {/* 删除 */}
            <Tooltip
                title="删除(del)"
                placement="bottom"
                mouseLeaveDelay={0}
                mouseEnterDelay={0.5}
            >
                <Popconfirm
                    title="确定要删除当前组?"
                    okText="确定"
                    cancelText="取消"
                    onConfirm={() => {
                        designTemplateEditor.delActiveObject();
                    }}
                >
                    <span
                        className={styles.btn}
                        dangerouslySetInnerHTML={{ __html: delSVG }}
                    >
                    </span>
                </Popconfirm>
            </Tooltip>

        </div >
    );

}